www.gusucode.com > XYCMS PHP留言板源码 v1.8PHP源码程序 > XYCMS PHP留言板源码 v1.8/xycmslyb_v1.8/xycmslyb_v1.8/system/xyeditor/plugins/table/table.js
/*******************************************************************************
* KindEditor - WYSIWYG HTML Editor for Internet
* Copyright (C) 2006-2011 kindsoft.net
*
* @author Roddy <luolonghao@gmail.com>
* @site http://www.kindsoft.net/
* @licence http://www.kindsoft.net/license.php
*******************************************************************************/
KindEditor.plugin('table', function(K) {
var self = this, name = 'table', lang = self.lang(name + '.'), zeroborder = 'ke-zeroborder';
// 设置颜色
function _setColor(box, color) {
color = color.toUpperCase();
box.css('background-color', color);
box.css('color', color === '#000000' ? '#FFFFFF' : '#000000');
box.html(color);
}
// 初始化取色器
var pickerList = [];
function _initColorPicker(dialogDiv, colorBox) {
colorBox.bind('click,mousedown', function(e){
e.stopPropagation();
});
function removePicker() {
K.each(pickerList, function() {
this.remove();
});
pickerList = [];
K(document).unbind('click,mousedown', removePicker);
dialogDiv.unbind('click,mousedown', removePicker);
}
colorBox.click(function(e) {
removePicker();
var box = K(this),
pos = box.pos();
var picker = K.colorpicker({
x : pos.x,
y : pos.y + box.height(),
z : 811214,
selectedColor : K(this).html(),
colors : self.colorTable,
noColor : self.lang('noColor'),
shadowMode : self.shadowMode,
click : function(color) {
_setColor(box, color);
removePicker();
}
});
pickerList.push(picker);
K(document).bind('click,mousedown', removePicker);
dialogDiv.bind('click,mousedown', removePicker);
});
}
// 取得下一行cell的index
function _getCellIndex(table, row, cell) {
var rowSpanCount = 0;
for (var i = 0, len = row.cells.length; i < len; i++) {
if (row.cells[i] == cell) {
break;
}
rowSpanCount += row.cells[i].rowSpan - 1;
}
return cell.cellIndex - rowSpanCount;
}
self.plugin.table = {
//insert or modify table
prop : function(isInsert) {
var html = [
'<div style="padding:20px;">',
//rows, cols
'<div class="ke-dialog-row">',
'<label for="keRows" style="width:90px;">' + lang.cells + '</label>',
lang.rows + ' <input type="text" id="keRows" class="ke-input-text ke-input-number" name="rows" value="" maxlength="4" /> ',
lang.cols + ' <input type="text" class="ke-input-text ke-input-number" name="cols" value="" maxlength="4" />',
'</div>',
//width, height
'<div class="ke-dialog-row">',
'<label for="keWidth" style="width:90px;">' + lang.size + '</label>',
lang.width + ' <input type="text" id="keWidth" class="ke-input-text ke-input-number" name="width" value="" maxlength="4" /> ',
'<select name="widthType">',
'<option value="%">' + lang.percent + '</option>',
'<option value="px">' + lang.px + '</option>',
'</select> ',
lang.height + ' <input type="text" class="ke-input-text ke-input-number" name="height" value="" maxlength="4" /> ',
'<select name="heightType">',
'<option value="%">' + lang.percent + '</option>',
'<option value="px">' + lang.px + '</option>',
'</select>',
'</div>',
//space, padding
'<div class="ke-dialog-row">',
'<label for="kePadding" style="width:90px;">' + lang.space + '</label>',
lang.padding + ' <input type="text" id="kePadding" class="ke-input-text ke-input-number" name="padding" value="" maxlength="4" /> ',
lang.spacing + ' <input type="text" class="ke-input-text ke-input-number" name="spacing" value="" maxlength="4" />',
'</div>',
//align
'<div class="ke-dialog-row">',
'<label for="keAlign" style="width:90px;">' + lang.align + '</label>',
'<select id="keAlign" name="align">',
'<option value="">' + lang.alignDefault + '</option>',
'<option value="left">' + lang.alignLeft + '</option>',
'<option value="center">' + lang.alignCenter + '</option>',
'<option value="right">' + lang.alignRight + '</option>',
'</select>',
'</div>',
//border
'<div class="ke-dialog-row">',
'<label for="keBorder" style="width:90px;">' + lang.border + '</label>',
lang.borderWidth + ' <input type="text" id="keBorder" class="ke-input-text ke-input-number" name="border" value="" maxlength="4" /> ',
lang.borderColor + ' <span class="ke-inline-block ke-input-color"></span>',
'</div>',
//background color
'<div class="ke-dialog-row">',
'<label for="keBgColor" style="width:90px;">' + lang.backgroundColor + '</label>',
'<span class="ke-inline-block ke-input-color"></span>',
'</div>',
'</div>'
].join('');
var bookmark = self.cmd.range.createBookmark();
var dialog = self.createDialog({
name : name,
width : 500,
title : self.lang(name),
body : html,
beforeRemove : function() {
colorBox.unbind();
},
yesBtn : {
name : self.lang('yes'),
click : function(e) {
var rows = rowsBox.val(),
cols = colsBox.val(),
width = widthBox.val(),
height = heightBox.val(),
widthType = widthTypeBox.val(),
heightType = heightTypeBox.val(),
padding = paddingBox.val(),
spacing = spacingBox.val(),
align = alignBox.val(),
border = borderBox.val(),
borderColor = K(colorBox[0]).html() || '',
bgColor = K(colorBox[1]).html() || '';
if (rows == 0 || !/^\d+$/.test(rows)) {
alert(self.lang('invalidRows'));
rowsBox[0].focus();
return;
}
if (cols == 0 || !/^\d+$/.test(cols)) {
alert(self.lang('invalidRows'));
colsBox[0].focus();
return;
}
if (!/^\d*$/.test(width)) {
alert(self.lang('invalidWidth'));
widthBox[0].focus();
return;
}
if (!/^\d*$/.test(height)) {
alert(self.lang('invalidHeight'));
heightBox[0].focus();
return;
}
if (!/^\d*$/.test(padding)) {
alert(self.lang('invalidPadding'));
paddingBox[0].focus();
return;
}
if (!/^\d*$/.test(spacing)) {
alert(self.lang('invalidSpacing'));
spacingBox[0].focus();
return;
}
if (!/^\d*$/.test(border)) {
alert(self.lang('invalidBorder'));
borderBox[0].focus();
return;
}
//modify table
if (table) {
if (width !== '') {
table.width(width + widthType);
} else {
table.css('width', '');
}
if (table[0].width !== undefined) {
table.removeAttr('width');
}
if (height !== '') {
table.height(height + heightType);
} else {
table.css('height', '');
}
if (table[0].height !== undefined) {
table.removeAttr('height');
}
table.css('background-color', bgColor);
if (table[0].bgColor !== undefined) {
table.removeAttr('bgColor');
}
if (padding !== '') {
table[0].cellPadding = padding;
} else {
table.removeAttr('cellPadding');
}
if (spacing !== '') {
table[0].cellSpacing = spacing;
} else {
table.removeAttr('cellSpacing');
}
if (align !== '') {
table[0].align = align;
} else {
table.removeAttr('align');
}
if (border !== '') {
table.attr('border', border);
} else {
table.removeAttr('border');
}
if (border === '' || border === '0') {
table.addClass(zeroborder);
} else {
table.removeClass(zeroborder);
}
if (borderColor !== '') {
table.attr('borderColor', borderColor);
} else {
table.removeAttr('borderColor');
}
self.hideDialog().focus();
self.cmd.range.moveToBookmark(bookmark);
self.cmd.select();
self.addBookmark();
return;
}
//insert new table
var style = '';
if (width !== '') {
style += 'width:' + width + widthType + ';';
}
if (height !== '') {
style += 'height:' + height + heightType + ';';
}
if (bgColor !== '') {
style += 'background-color:' + bgColor + ';';
}
var html = '<table';
if (style !== '') {
html += ' style="' + style + '"';
}
if (padding !== '') {
html += ' cellpadding="' + padding + '"';
}
if (spacing !== '') {
html += ' cellspacing="' + spacing + '"';
}
if (align !== '') {
html += ' align="' + align + '"';
}
if (border !== '') {
html += ' border="' + border + '"';
}
if (border === '' || border === '0') {
html += ' class="' + zeroborder + '"';
}
if (borderColor !== '') {
html += ' bordercolor="' + borderColor + '"';
}
html += '>';
for (var i = 0; i < rows; i++) {
html += '<tr>';
for (var j = 0; j < cols; j++) {
html += '<td>' + (K.IE ? ' ' : '<br />') + '</td>';
}
html += '</tr>';
}
html += '</table>';
if (!K.IE) {
html += '<br />';
}
self.insertHtml(html);
self.select().hideDialog().focus();
self.addBookmark();
}
}
}),
div = dialog.div,
rowsBox = K('[name="rows"]', div).val(3),
colsBox = K('[name="cols"]', div).val(2),
widthBox = K('[name="width"]', div).val(100),
heightBox = K('[name="height"]', div),
widthTypeBox = K('[name="widthType"]', div),
heightTypeBox = K('[name="heightType"]', div),
paddingBox = K('[name="padding"]', div).val(2),
spacingBox = K('[name="spacing"]', div).val(0),
alignBox = K('[name="align"]', div),
borderBox = K('[name="border"]', div).val(1),
colorBox = K('.ke-input-color', div);
_initColorPicker(div, colorBox.eq(0));
_initColorPicker(div, colorBox.eq(1));
_setColor(colorBox.eq(0), '#000000');
_setColor(colorBox.eq(1), '');
// foucs and select
rowsBox[0].focus();
rowsBox[0].select();
var table;
if (isInsert) {
return;
}
//get selected table node
table = self.plugin.getSelectedTable();
if (table) {
rowsBox.val(table[0].rows.length);
colsBox.val(table[0].rows.length > 0 ? table[0].rows[0].cells.length : 0);
rowsBox.attr('disabled', true);
colsBox.attr('disabled', true);
var match,
tableWidth = table[0].style.width || table[0].width,
tableHeight = table[0].style.height || table[0].height;
if (tableWidth !== undefined && (match = /^(\d+)((?:px|%)*)$/.exec(tableWidth))) {
widthBox.val(match[1]);
widthTypeBox.val(match[2]);
} else {
widthBox.val('');
}
if (tableHeight !== undefined && (match = /^(\d+)((?:px|%)*)$/.exec(tableHeight))) {
heightBox.val(match[1]);
heightTypeBox.val(match[2]);
}
paddingBox.val(table[0].cellPadding || '');
spacingBox.val(table[0].cellSpacing || '');
alignBox.val(table[0].align || '');
borderBox.val(table[0].border === undefined ? '' : table[0].border);
_setColor(colorBox.eq(0), K.toHex(table.attr('borderColor') || ''));
_setColor(colorBox.eq(1), K.toHex(table[0].style.backgroundColor || table[0].bgColor || ''));
widthBox[0].focus();
widthBox[0].select();
}
},
//modify cell
cellprop : function() {
var html = [
'<div style="padding:20px;">',
//width, height
'<div class="ke-dialog-row">',
'<label for="keWidth" style="width:90px;">' + lang.size + '</label>',
lang.width + ' <input type="text" id="keWidth" class="ke-input-text ke-input-number" name="width" value="" maxlength="4" /> ',
'<select name="widthType">',
'<option value="%">' + lang.percent + '</option>',
'<option value="px">' + lang.px + '</option>',
'</select> ',
lang.height + ' <input type="text" class="ke-input-text ke-input-number" name="height" value="" maxlength="4" /> ',
'<select name="heightType">',
'<option value="%">' + lang.percent + '</option>',
'<option value="px">' + lang.px + '</option>',
'</select>',
'</div>',
//align
'<div class="ke-dialog-row">',
'<label for="keAlign" style="width:90px;">' + lang.align + '</label>',
lang.textAlign + ' <select id="keAlign" name="textAlign">',
'<option value="">' + lang.alignDefault + '</option>',
'<option value="left">' + lang.alignLeft + '</option>',
'<option value="center">' + lang.alignCenter + '</option>',
'<option value="right">' + lang.alignRight + '</option>',
'</select> ',
lang.verticalAlign + ' <select name="verticalAlign">',
'<option value="">' + lang.alignDefault + '</option>',
'<option value="top">' + lang.alignTop + '</option>',
'<option value="middle">' + lang.alignMiddle + '</option>',
'<option value="bottom">' + lang.alignBottom + '</option>',
'<option value="baseline">' + lang.alignBaseline + '</option>',
'</select>',
'</div>',
//border
'<div class="ke-dialog-row">',
'<label for="keBorder" style="width:90px;">' + lang.border + '</label>',
lang.borderWidth + ' <input type="text" id="keBorder" class="ke-input-text ke-input-number" name="border" value="" maxlength="4" /> ',
lang.borderColor + ' <span class="ke-inline-block ke-input-color"></span>',
'</div>',
//background color
'<div class="ke-dialog-row">',
'<label for="keBgColor" style="width:90px;">' + lang.backgroundColor + '</label>',
'<span class="ke-inline-block ke-input-color"></span>',
'</div>',
'</div>'
].join('');
var bookmark = self.cmd.range.createBookmark();
var dialog = self.createDialog({
name : name,
width : 500,
title : self.lang('tablecell'),
body : html,
beforeRemove : function() {
colorBox.unbind();
},
yesBtn : {
name : self.lang('yes'),
click : function(e) {
var width = widthBox.val(),
height = heightBox.val(),
widthType = widthTypeBox.val(),
heightType = heightTypeBox.val(),
padding = paddingBox.val(),
spacing = spacingBox.val(),
textAlign = textAlignBox.val(),
verticalAlign = verticalAlignBox.val(),
border = borderBox.val(),
borderColor = K(colorBox[0]).html() || '',
bgColor = K(colorBox[1]).html() || '';
if (!/^\d*$/.test(width)) {
alert(self.lang('invalidWidth'));
widthBox[0].focus();
return;
}
if (!/^\d*$/.test(height)) {
alert(self.lang('invalidHeight'));
heightBox[0].focus();
return;
}
if (!/^\d*$/.test(border)) {
alert(self.lang('invalidBorder'));
borderBox[0].focus();
return;
}
cell.css({
width : width !== '' ? (width + widthType) : '',
height : height !== '' ? (height + heightType) : '',
'background-color' : bgColor,
'text-align' : textAlign,
'vertical-align' : verticalAlign,
'border-width' : border,
'border-style' : border !== '' ? 'solid' : '',
'border-color' : borderColor
});
self.hideDialog().focus();
self.cmd.range.moveToBookmark(bookmark);
self.cmd.select();
self.addBookmark();
}
}
}),
div = dialog.div,
widthBox = K('[name="width"]', div).val(100),
heightBox = K('[name="height"]', div),
widthTypeBox = K('[name="widthType"]', div),
heightTypeBox = K('[name="heightType"]', div),
paddingBox = K('[name="padding"]', div).val(2),
spacingBox = K('[name="spacing"]', div).val(0),
textAlignBox = K('[name="textAlign"]', div),
verticalAlignBox = K('[name="verticalAlign"]', div),
borderBox = K('[name="border"]', div).val(1),
colorBox = K('.ke-input-color', div);
_initColorPicker(div, colorBox.eq(0));
_initColorPicker(div, colorBox.eq(1));
_setColor(colorBox.eq(0), '#000000');
_setColor(colorBox.eq(1), '');
// foucs and select
widthBox[0].focus();
widthBox[0].select();
// get selected cell
var cell = self.plugin.getSelectedCell();
var match,
cellWidth = cell[0].style.width || cell[0].width || '',
cellHeight = cell[0].style.height || cell[0].height || '';
if ((match = /^(\d+)((?:px|%)*)$/.exec(cellWidth))) {
widthBox.val(match[1]);
widthTypeBox.val(match[2]);
} else {
widthBox.val('');
}
if ((match = /^(\d+)((?:px|%)*)$/.exec(cellHeight))) {
heightBox.val(match[1]);
heightTypeBox.val(match[2]);
}
textAlignBox.val(cell[0].style.textAlign || '');
verticalAlignBox.val(cell[0].style.verticalAlign || '');
var border = cell[0].style.borderWidth || '';
if (border) {
border = parseInt(border);
}
borderBox.val(border);
_setColor(colorBox.eq(0), K.toHex(cell[0].style.borderColor || ''));
_setColor(colorBox.eq(1), K.toHex(cell[0].style.backgroundColor || ''));
widthBox[0].focus();
widthBox[0].select();
},
insert : function() {
this.prop(true);
},
'delete' : function() {
var table = self.plugin.getSelectedTable();
self.cmd.range.setStartBefore(table[0]).collapse(true);
self.cmd.select();
table.remove();
self.addBookmark();
},
colinsert : function(offset) {
var table = self.plugin.getSelectedTable()[0],
row = self.plugin.getSelectedRow()[0],
cell = self.plugin.getSelectedCell()[0],
index = cell.cellIndex + offset;
// 取得第一行的index
index += table.rows[0].cells.length - row.cells.length;
for (var i = 0, len = table.rows.length; i < len; i++) {
var newRow = table.rows[i],
newCell = newRow.insertCell(index);
newCell.innerHTML = K.IE ? '' : '<br />';
// 调整下一行的单元格index
index = _getCellIndex(table, newRow, newCell);
}
self.cmd.range.selectNodeContents(cell).collapse(true);
self.cmd.select();
self.addBookmark();
},
colinsertleft : function() {
this.colinsert(0);
},
colinsertright : function() {
this.colinsert(1);
},
rowinsert : function(offset) {
var table = self.plugin.getSelectedTable()[0],
row = self.plugin.getSelectedRow()[0],
cell = self.plugin.getSelectedCell()[0];
var rowIndex = row.rowIndex;
if (offset === 1) {
rowIndex = row.rowIndex + (cell.rowSpan - 1) + offset;
}
var newRow = table.insertRow(rowIndex);
for (var i = 0, len = row.cells.length; i < len; i++) {
// 调整cell个数
if (row.cells[i].rowSpan > 1) {
len -= row.cells[i].rowSpan - 1;
}
var newCell = newRow.insertCell(i);
// copy colspan
if (offset === 1 && row.cells[i].colSpan > 1) {
newCell.colSpan = row.cells[i].colSpan;
}
newCell.innerHTML = K.IE ? '' : '<br />';
}
// 调整rowspan
for (var j = rowIndex; j >= 0; j--) {
var cells = table.rows[j].cells;
if (cells.length > i) {
for (var k = cell.cellIndex; k >= 0; k--) {
if (cells[k].rowSpan > 1) {
cells[k].rowSpan += 1;
}
}
break;
}
}
self.cmd.range.selectNodeContents(cell).collapse(true);
self.cmd.select();
self.addBookmark();
},
rowinsertabove : function() {
this.rowinsert(0);
},
rowinsertbelow : function() {
this.rowinsert(1);
},
rowmerge : function() {
var table = self.plugin.getSelectedTable()[0],
row = self.plugin.getSelectedRow()[0],
cell = self.plugin.getSelectedCell()[0],
rowIndex = row.rowIndex, // 当前行的index
nextRowIndex = rowIndex + cell.rowSpan, // 下一行的index
nextRow = table.rows[nextRowIndex]; // 下一行
// 最后一行不能合并
if (table.rows.length <= nextRowIndex) {
return;
}
var cellIndex = cell.cellIndex; // 下一行单元格的index
if (nextRow.cells.length <= cellIndex) {
return;
}
var nextCell = nextRow.cells[cellIndex]; // 下一行单元格
// 上下行的colspan不一致时不能合并
if (cell.colSpan !== nextCell.colSpan) {
return;
}
cell.rowSpan += nextCell.rowSpan;
nextRow.deleteCell(cellIndex);
self.cmd.range.selectNodeContents(cell).collapse(true);
self.cmd.select();
self.addBookmark();
},
colmerge : function() {
var table = self.plugin.getSelectedTable()[0],
row = self.plugin.getSelectedRow()[0],
cell = self.plugin.getSelectedCell()[0],
rowIndex = row.rowIndex, // 当前行的index
cellIndex = cell.cellIndex,
nextCellIndex = cellIndex + 1;
// 最后一列不能合并
if (row.cells.length <= nextCellIndex) {
return;
}
var nextCell = row.cells[nextCellIndex];
// 左右列的rowspan不一致时不能合并
if (cell.rowSpan !== nextCell.rowSpan) {
return;
}
cell.colSpan += nextCell.colSpan;
row.deleteCell(nextCellIndex);
self.cmd.range.selectNodeContents(cell).collapse(true);
self.cmd.select();
self.addBookmark();
},
rowsplit : function() {
var table = self.plugin.getSelectedTable()[0],
row = self.plugin.getSelectedRow()[0],
cell = self.plugin.getSelectedCell()[0],
rowIndex = row.rowIndex;
// 不是可分割单元格
if (cell.rowSpan === 1) {
return;
}
var cellIndex = _getCellIndex(table, row, cell);
for (var i = 1, len = cell.rowSpan; i < len; i++) {
var newRow = table.rows[rowIndex + i],
newCell = newRow.insertCell(cellIndex);
if (cell.colSpan > 1) {
newCell.colSpan = cell.colSpan;
}
newCell.innerHTML = K.IE ? '' : '<br />';
// 调整下一行的单元格index
cellIndex = _getCellIndex(table, newRow, newCell);
}
K(cell).removeAttr('rowSpan');
self.cmd.range.selectNodeContents(cell).collapse(true);
self.cmd.select();
self.addBookmark();
},
colsplit : function() {
var table = self.plugin.getSelectedTable()[0],
row = self.plugin.getSelectedRow()[0],
cell = self.plugin.getSelectedCell()[0],
cellIndex = cell.cellIndex;
// 不是可分割单元格
if (cell.colSpan === 1) {
return;
}
for (var i = 1, len = cell.colSpan; i < len; i++) {
var newCell = row.insertCell(cellIndex + i);
if (cell.rowSpan > 1) {
newCell.rowSpan = cell.rowSpan;
}
newCell.innerHTML = K.IE ? '' : '<br />';
}
K(cell).removeAttr('colSpan');
self.cmd.range.selectNodeContents(cell).collapse(true);
self.cmd.select();
self.addBookmark();
},
coldelete : function() {
var table = self.plugin.getSelectedTable()[0],
row = self.plugin.getSelectedRow()[0],
cell = self.plugin.getSelectedCell()[0],
index = cell.cellIndex;
for (var i = 0, len = table.rows.length; i < len; i++) {
var newRow = table.rows[i],
newCell = newRow.cells[index];
if (newCell.colSpan > 1) {
newCell.colSpan -= 1;
if (newCell.colSpan === 1) {
K(newCell).removeAttr('colSpan');
}
} else {
newRow.deleteCell(index);
}
// 跳过不需要删除的行
if (newCell.rowSpan > 1) {
i += newCell.rowSpan - 1;
}
}
if (row.cells.length === 0) {
self.cmd.range.setStartBefore(table).collapse(true);
self.cmd.select();
K(table).remove();
} else {
self.cmd.selection(true);
}
self.addBookmark();
},
rowdelete : function() {
var table = self.plugin.getSelectedTable()[0],
row = self.plugin.getSelectedRow()[0],
cell = self.plugin.getSelectedCell()[0],
rowIndex = row.rowIndex;
// 从下到上删除
for (var i = cell.rowSpan - 1; i >= 0; i--) {
table.deleteRow(rowIndex + i);
}
if (table.rows.length === 0) {
self.cmd.range.setStartBefore(table).collapse(true);
self.cmd.select();
K(table).remove();
} else {
self.cmd.selection(true);
}
self.addBookmark();
}
};
self.clickToolbar(name, self.plugin.table.prop);
});